fix(react-start): Apply Link active properties correctly on SSR when including hash #6421

nlynzaad · 2026-01-19T23:36:13Z

This PR applies the same fix that was done in #6389 for Solid to React. As mentioned by @theoludwig in the comments this affects React as well and was missed by the tests.

This PR also updates and aligns the tests across React, Solid and Vue.

Summary by CodeRabbit

New Features
- Added a toggle button across frameworks to show/hide the URL hash value and added two hash-enabled links (Unicode hash and "abc") on the special-chars route.
Bug Fixes
- Refined link active-state handling to improve hash-based matching consistency across navigation and server renders.
Tests
- Updated end-to-end tests to cover both hash links, the toggle interaction, and post-navigation hash content checks.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-19T23:36:27Z

📝 Walkthrough

Walkthrough

Adds a toggle-controlled conditional display of the current URL hash in React, Solid, and Vue starter routes, updates e2e tests to use two hash links and toggle before asserting the hash, and adjusts link active-evaluation logic in react-router and solid-router regarding hash handling.

Changes

Cohort / File(s)	Summary
React route & tests `e2e/react-start/basic/src/routes/specialChars/hash.tsx`, `e2e/react-start/basic/tests/special-characters.spec.ts`	Adds `toggleHashValue` state and toggle button to conditionally render `location().hash`; tests now use `special-hash-link-1` and `special-hash-link-2`, click `toggle-hash-button` before reading hash, and switch some assertions to `toContainClass`.
Solid route & tests `e2e/solid-start/basic/src/routes/specialChars/hash.tsx`, `e2e/solid-start/basic/tests/special-characters.spec.ts`	Replaces automatic hash syncing (`createEffect`) with a boolean toggle and button-driven conditional hash display; tests updated to reference `-1`/`-2` links, toggle before asserting hash, and use `toContainClass` in class checks.
Vue route & tests `e2e/vue-start/basic/src/routes/specialChars/hash.tsx`, `e2e/vue-start/basic/tests/special-characters.spec.ts`	Replaces function route with a `defineComponent` providing `toggleHashValue` and a toggle button to conditionally show the location hash; tests updated to use two hash links and toggle before reading the hash, with containment-based class assertions.
Route link entries `e2e/*/basic/src/routes/specialChars/route.tsx` (React, Solid, Vue)	Renames original `special-hash-link` → `special-hash-link-1` and adds `special-hash-link-2` linking to same route with `hash: 'abc'` and `includeHash: true`; link labels updated (e.g., "Unicode Hash 대
React router link logic `packages/react-router/src/link.tsx`	Introduces `activeState` via `useRouterState` and consumes it with `useSyncExternalStore`; adds server-aware snapshot logic to account for `includeHash` and `_hash`.
Solid router link logic `packages/solid-router/src/link.tsx`	`useLinkProps` now evaluates hash comparison unconditionally when `includeHash` is set (removed prior server-only guard), causing hash comparison on both server and client.

Sequence Diagram(s)

(Skipped — changes are UI toggles and focused link logic updates that do not introduce a new multi-component sequential flow requiring visualization.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

fix: encoded url hash fragment matching #6416: modifies hash-fragment active-matching and SSR behavior in link active-state logic (strongly related).

Suggested labels

package: vue-router

Suggested reviewers

schiller-manuel

Poem

🐇 I nudge a little toggle, peek the hash so bright,
Unicode and "abc" pop into sight,
React, Solid, Vue — I hop with glee,
Links bold or quiet, what fun to see,
A rabbit cheers for code that's light!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: applying Link active properties correctly on SSR when including hash, which is the core fix across React, Solid, and Vue implementations.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-01-19T23:36:50Z

View your CI Pipeline Execution ↗ for commit 888749e

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	12m 2s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	55s	View ↗

☁️ Nx Cloud last updated this comment at 2026-01-21 00:50:23 UTC

pkg-pr-new · 2026-01-19T23:40:08Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@6421

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@6421

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@6421

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@6421

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@6421

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@6421

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@6421

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@6421

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@6421

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@6421

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@6421

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@6421

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@6421

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@6421

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@6421

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@6421

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@6421

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@6421

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@6421

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@6421

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@6421

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@6421

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@6421

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@6421

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@6421

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@6421

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-fn-stubs@6421

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@6421

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@6421

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@6421

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@6421

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@6421

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@6421

@tanstack/vue-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router@6421

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-devtools@6421

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-ssr-query@6421

@tanstack/vue-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start@6421

@tanstack/vue-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-client@6421

@tanstack/vue-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-server@6421

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@6421

commit: 888749e

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/react-router/src/link.tsx`:
- Around line 100-105: currentHash from useRouterState is subscribed but not
used, so hash-only navigations don't trigger recomputation of href; update the
memo dependencies (where buildLocation/_options/next/href are computed) to
include currentHash (or include currentHash in next's deps) so buildLocation is
re-run on hash changes and remove the unused-variable issue—locate the code that
computes next/_options/href (the memoized block that calls buildLocation) and
add currentHash to its dependency array.

packages/react-router/src/link.tsx

theoludwig · 2026-01-20T00:07:15Z

Thank you for working on this!

Edit: I tried to test the PR using pkg.pr.new with:

"@tanstack/react-router": "https://pkg.pr.new/TanStack/router/@tanstack/react-router@6421"
"@tanstack/react-start": "https://pkg.pr.new/TanStack/router/@tanstack/react-start@6421"

However, it doesn't seem to resolve the hydratation issue. And now all my links that point to the same page are considered "active", even with includeHash: true, and exact: true.

nlynzaad · 2026-01-20T09:20:01Z

Thank you for working on this!

Edit: I tried to test the PR using pkg.pr.new with:
"@tanstack/react-router": "https://pkg.pr.new/TanStack/router/@tanstack/react-router@6421"
"@tanstack/react-start": "https://pkg.pr.new/TanStack/router/@tanstack/react-start@6421"
However, it doesn't seem to resolve the hydratation issue. And now all my links that point to the same page are considered "active", even with includeHash: true, and exact: true.

picked this up during testing and hence the draft status, digging through it to find a more holistic solution

nlynzaad · 2026-01-21T00:30:38Z

@theoludwig could you test the latest builds and advise if the problem is resolved for you. When including hashes for active options you can remove exact:true as that overrides the hash checks.

theoludwig · 2026-01-21T08:01:09Z

@theoludwig could you test the latest builds and advise if the problem is resolved for you. When including hashes for active options you can remove exact:true as that overrides the hash checks.

Oh indeed, the issue is now resolved! I needed to do rm -rf "$(pnpm store path)" otherwise pnpm wouldn't pick the change from pkg.pr.new.

I end up doing something like this for checking if it needs exact: true or includeHash: true:

const SidebarItemCreate = createLink(SidebarItemRaw)
export const SidebarItem: LinkComponent<React.FC<SidebarItemRawProps>> = (props) => {
  return (
    <SidebarItemCreate
      activeProps={{
        isActive: true,
      }}
      activeOptions={{
        exact: props.hash == null,
        includeHash: props.hash != null,
      }}
      {...props}
    />
  )
}

Thank you again! Looking forward to getting this released.

nlynzaad added 3 commits January 20, 2026 01:09

react: fix link active hash reactivity on SSR

ae03dff

update and align tests

1d9956f

Merge branch 'refs/heads/main' into hash-ssr-reactivity

19b2bd1

github-actions bot added the package: react-router label Jan 19, 2026

coderabbitai bot reviewed Jan 19, 2026

View reviewed changes

packages/react-router/src/link.tsx Outdated Show resolved Hide resolved

remove unnecessary change

89b816b

nlynzaad marked this pull request as draft January 20, 2026 01:02

nlynzaad added 4 commits January 20, 2026 18:47

better address react re-renders and update tests

9860485

add tests for vue

20cefe2

react: add comment on reason for useSyncExternalStore usage

9881318

solid: revert prior fix and update tests

8abd717

github-actions bot added the package: solid-router label Jan 21, 2026

Merge branch 'main' into hash-ssr-reactivity

d337f00

nlynzaad marked this pull request as ready for review January 21, 2026 00:28

react: revert unnecessary change

888749e

Uh oh!

fix(react-start): Apply Link active properties correctly on SSR when including hash #6421

Are you sure you want to change the base?

fix(react-start): Apply Link active properties correctly on SSR when including hash #6421

Conversation

nlynzaad commented Jan 19, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

nx-cloud bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

theoludwig commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nlynzaad commented Jan 20, 2026

Uh oh!

nlynzaad commented Jan 21, 2026

Uh oh!

theoludwig commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nlynzaad commented Jan 19, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 19, 2026 •

edited

Loading

nx-cloud bot commented Jan 19, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 19, 2026 •

edited

Loading

theoludwig commented Jan 20, 2026 •

edited

Loading

theoludwig commented Jan 21, 2026 •

edited

Loading